<template>
  <div style="padding: 10px;">
    <el-card class="card-container">
      <div slot="header" class="card-header">
        <div class="card-title">修改密码</div>
        <div class="card-opt-btn-list">
          <el-button :loading="isLoading" type="primary" @click="save()">更新</el-button>
          <el-button type="default" @click="$$closeTag()">关闭</el-button>
        </div>
      </div>
      <el-row>
        <el-col :span="10">
          <el-form
            ref="dataForm"
            :model="dataForm"
            :rules="formRules"
            :disabled="!isEditing"
            :hide-required-asterisk="!isEditing"
            :show-message="isEditing"
            label-width="100px">
            <el-form-item label="原密码" prop="oldPassword">
              <el-input v-model.trim="dataForm.oldPassword" type="password" placeholder="请输入原密码" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model.trim="dataForm.newPassword" type="password" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item label="再次输入" prop="renewPassword">
              <el-input v-model.trim="dataForm.renewPassword" type="password" placeholder="请再次输入新密码" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

import CloseTagMixin from '@/mixins/closeTag'
import { updatePassword } from '@/api/systemManage/user'
// import waves from '@/directive/waves' // Waves directive
import SparkMD5 from 'spark-md5'

export default {
  mixins: [CloseTagMixin],
  data() {
    // validator
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.dataForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {

      isLoading: false,
      isEditing: true,

      dataForm: {},
      formRules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 18, message: '密码长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        renewPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },

      listQuery: {},
      queryOption: {}
    }
  },

  mounted() {
    this.$store.dispatch('setTagName', {
      path: this.$route.path,
      title: `修改密码`
    })
    // 初始化数据模板
    this.formReset()
  },

  methods: {

    formReset() {
      this.dataForm = {
        id: this.$store.getters.userId,
        oldPassword: '',
        newPassword: '',
        renewPassword: ''
      }
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()
      })
    },

    edit() {
      this.$refs.dataForm.clearValidate()
      this.isEditing = true
    },

    cancel() {
      // this.getDetail()
      this.formReset()
      this.isEditing = false
    },

    save() {
      this.isLoading = true
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.saveLoading = true
          // this.dataForm.oldPassword = this.getPasswordMd5(this.dataForm.oldPassword)
          // this.dataForm.newPassword = this.getPasswordMd5(this.dataForm.newPassword)
          // this.dataForm.renewPassword = this.getPasswordMd5(this.dataForm.renewPassword)
          const submitData = {
            oldPassword: this.getPasswordMd5(this.dataForm.oldPassword),
            newPassword: this.getPasswordMd5(this.dataForm.newPassword)
            // renewPassword: this.getPasswordMd5(this.dataForm.renewPassword)
          }
          updatePassword(submitData).then(res => {
            this.isLoading = false
            this.formReset()
            this.$message.success(res.message)
          }).catch(res => {
            this.isLoading = false
            this.formReset()
            this.$message.error(res.message)
          })
        } else return false
      })
    },

    getPasswordMd5(password) {
      const spark = new SparkMD5()
      spark.append(password)
      return spark.end()
    }
  }
}
</script>
